<template>
    <div>
        <navtop :title="goodInfos.goodName"></navtop>
        <div class="gooddetailContainer">
            <div class="swipers">
                <mt-swipe :auto="4000">
                    <mt-swipe-item v-for="(item, index) in goodDetailImgs" :key="index">
                        <img :src="item.images" alt="#img" />
                    </mt-swipe-item>
                </mt-swipe>
            </div>
            <div class="goodsdetailss">
                <div>
                    <div class="left">品名:</div>
                    <div class="right">{{goodInfos.goodDetailNmae}}</div>
                </div>
                <div>
                    <div class="left">价格:</div>
                    <div class="right" style="color:red;">{{goodInfos.goodPrice}}￥</div>
                </div>
                <div>
                    <div class="left">库存:</div>
                    <div class="right">{{goodInfos.goodNums}}/pcs</div>
                </div>
                <div>
                    <div class="left">运费:</div>
                    <div class="right">{{goodInfos.goodShipFree==true?'免运费':'75折运费'}}</div>
                </div>
                <div class="operabtns">
                    <mt-button @click="addfav" size="small" plain type="primary">加入收藏</mt-button>
                    <mt-button @click="addshopcar" size="small" type="primary">加入购物车</mt-button>
                    <mt-button @click="addorder" size="small" type="danger">立即下单</mt-button>
                </div>
            </div>
            <div class="goodContentImages">
                <img v-for="(item, index) in contentImages" :key="index" v-lazy="item.images" />
            </div>
            <div class="gooddetailParams">
                <div v-for="(item, index) in goodDetailInfos" :key="index" class="paramsContainer">
                    <div class="paramsLeft">{{item.detailName}}:</div>
                    <div class="paramsRight">{{item.detialValue}}</div>
                </div>
            </div>
        </div>
    </div>
</template>



<script>
import navtop from "../navtop/nav.vue";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            goodId: this.$route.params.id,
            goodInfos: {}, // 信息
            goodDetailInfos: [], // 参数
            contentImages: [], // 内容图片
            goodDetailImgs: [] // 轮播图片
        };
    },
    mounted() {
        this.getGoodDetail(this.goodId);
        this.getGoodDetailImg();
        this.getGoodContentImages();
        this.getGoodDetailInfos();
    },
    methods: {
        // 获取详细图片
        getGoodDetailImg() {
            Indicator.open({
                text: "加载中...",
                spinnerType: "fading-circle"
            });
            this.$ajax
                .get("goodsdetialimages/?goods=" + this.goodId)
                .then(res => {
                    //console.log(res.data);
                    this.goodDetailImgs = res.data.results;
                    Indicator.close();
                })
                .catch(err => {
                    console.log("getGoodDetailImg err");
                    Indicator.close();
                });
        },
        // 获取当前good的contentimages
        getGoodContentImages() {
            this.$ajax
                .get("goodscontentimages/?goods=" + this.goodId + "&limit=30")
                .then(res => {
                    //console.log(res.data);
                    this.contentImages = res.data.results;
                });
        },
        // 获取当前good的参数
        getGoodDetailInfos() {
            this.$ajax
                .get("goodsdetialinfos/?goods=" + this.goodId + "&limit=50")
                .then(res => {
                    //console.log(res.data);
                    this.goodDetailInfos = res.data.results;
                });
        },
        // 获取商品详细
        getGoodDetail(goodid) {
            this.$ajax.get("goods/" + goodid).then(res => {
                this.goodInfos = res.data;
            });
        },
        // 添加收藏
        addfav() {
            let mytoken = window.localStorage.getItem("token");
            if (mytoken == null) {
                this.$router.push({ name: "login" });
            } else {
                let userFavList = this.$store.state.fav;
                if (userFavList) {
                    let flagfav = true;
                    userFavList.forEach(item => {
                        if (item.goods.id == this.goodId) {
                            flagfav = false;
                            return false;
                        }
                    });
                    if (flagfav) {
                        this.$ajax
                            .post("/fav/", { goods: this.goodId })
                            .then(res => {
                                Toast({
                                    message: "收藏成功！",
                                    position: "top"
                                });
                                this.$store.commit(
                                    "favStore",
                                    res.data.results
                                );
                                this.$router.push({ name: "fav" });
                            })
                            .catch(err => {
                                Toast({
                                    message: "网络异常！",
                                    position: "top"
                                });
                            });
                    } else {
                        Toast({
                            message: "已收藏",
                            position: "top"
                        });
                    }
                } else {
                    this.$ajax
                        .post("/fav/", { goods: this.goodId })
                        .then(res => {
                            Toast({
                                message: "收藏成功！",
                                position: "top"
                            });
                            this.$store.commit("favStore", res.data.results);
                            this.$router.push({ name: "fav" });
                        })
                        .catch(err => {
                            Toast({
                                message: "网络异常！",
                                position: "top"
                            });
                        });
                }
            }
        },
        // 添加购物车
        addshopcar() {
            let mytoken = window.localStorage.getItem("token");
            if (mytoken == null) {
                this.$router.push({ name: "login" });
            } else {
                // 获取store里面的购物车列表（第一次有可能是null而不是数组）
                let userShopcarList = this.$store.state.shopcar;
                let areadyin = false;
                userShopcarList.forEach(item => {
                    if (item.shopcargoods.id == this.goodId) {
                        areadyin = true;
                        return false;
                    }
                });
                if (areadyin) {
                    Toast({
                        message: "已添加",
                        position: "top"
                    });
                } else {
                    this.$ajax
                        .post("/shopcar/", { shopcargoods: this.goodId })
                        .then(res => {
                            this.$store.commit(
                                "shopcarStore",
                                res.data.results
                            );
                            Toast({
                                message: "加入购物车！",
                                position: "top"
                            });
                            this.$router.push({ name: "shopcar" });
                        })
                        .catch(err => {
                            Toast({
                                message: "网络错误",
                                position: "top"
                            });
                        });
                }
            }
        },
        // 添加订单
        addorder() {
            let mytoken = window.localStorage.getItem("token");
            if (mytoken == null) {
                this.$router.push({ name: "login" });
            } else {
                let userOrderList = this.$store.state.order;
                let allredyin = false;
                userOrderList.forEach(item => {
                    if (item.goods.id == this.goodId) {
                        allredyi = true;
                        return false;
                    }
                });
                if (allredyin) {
                    Toast({
                        message: "已在订单列表",
                        position: "top"
                    });
                    this.$router.push({ name: "order" });
                } else {
                    this.$ajax
                        .post("/order/", {
                            goods: this.goodId,
                            goodsnums: 1
                        })
                        .then(res => {
                            this.$store.commit("orderStore", res.data.results);
                            Toast({
                                message: "下单成功",
                                position: "top"
                            });
                            this.$router.push({ name: "order" });
                        })
                        .catch(err => {
                            Toast({
                                message: "网络错误",
                                position: "top"
                            });
                        });
                }
            }
        }
    },
    components: {
        navtop
    }
};
</script>


<style lang="scss" scoped>
.gooddetailContainer {
    margin-top: 2.5rem;
    .swipers {
        width: 100%;
        height: 320px;
        margin-top: 2.5rem;

        img {
            display: inline-block;
            width: 100%;
            height: 320px;
        }
    }
    .goodsdetailss {
        margin: 5px;
        div {
            display: flex;
            font-size: 0.9rem;

            margin-top: 5px;
            div:nth-child(1) {
                color: rgb(78, 69, 69);
                width: 20%;
                display: flex;
                justify-content: flex-end;
                margin-right: 6px;
            }
            div:nth-child(2) {
                color: rgb(54, 39, 39);
                width: 80%;
            }
        }
        .operabtns {
            display: flex;
            justify-content: space-around;
            margin-top: 12px;
        }
    }
    .goodContentImages {
        margin-top: 20px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .gooddetailParams {
        margin-top: 20px;
        margin-bottom: 50px;
        font-size: 0.7rem;
        color: rgb(80, 70, 70);
        padding: 5px;
        .paramsContainer {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            border-bottom: 1px solid rgb(60, 128, 145);
            .paramsLeft {
                width: 20%;
                display: flex;
                justify-content: flex-end;
                margin-right: 6px;
            }
            .paramsRight {
                width: 80%;
            }
        }
    }
}
</style>